<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Loading</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
</head>
<body class="flex-center">
  <div class="loading-grid">
    <div class="flex-center">
      <!-- 带有loading类的是核心内容 -->
      <div class="loading two-balls">
        <div class="pink"></div>
        <div class="blue"></div>
      </div>
    </div>
    <div class="flex-center">
      <div class="loading three-balls-bounce">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
        <div class="shadow"></div>
      </div>
    </div>
    <div class="flex-center">
      <div class="loading four-balls"></div>
    </div>
    <div class="flex-center">
      <div class="loading cube-box">
        <div class="outer-box">
          <div class="large-box">
            <div class="small-box"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-center">
      <div class="loading ring"></div>
    </div>
    <div class="flex-center">
      <div class="loading slices"></div>
    </div>
    <div class="flex-center">
      <div class="loading hydrogen"></div>
    </div>
    <div class="flex-center">
      <svg class="loading recting" width="40" height="40" viewbox="0 0 40 40">
        <polygon points="0 0 0 40 40 40 40 0" class="polygon" />
      </svg>
    </div>
    <div class="flex-center">
      <div class="loading switch-box">
        <div class="switch"></div>
        <div class="switch"></div>
      </div>
    </div>
  </div>
</body>
</html>